<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { scmGoodsData } from '#/views/backend/scmGoods/config';

import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Tag } from 'ant-design-vue';

import CountTabs from '#/adapter/component/count-tabs.vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { navList, updateDataTask } from '#/api/materialPurchaseApprovalList';

const gridOptions: VxeTableGridOptions<scmGoodsData> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  height: 'auto',
  columns: [
    { field: 'create_admin_name', title: '提交人', width: 180 },
    { field: 'create_time', title: '创建时间', width: 160 },
    {
      field: '',
      title: '审批状态',

      slots: { default: 'stateName' },
    },
    {
      field: '',
      title: '修改对象',

      slots: { default: 'material_name' },
    },
    {
      field: '',
      title: '修改内容',

      slots: { default: 'update_data' },
    },
  ],
  cellConfig: {
    height: 80,
  },
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        // 1. 过滤空值
        const search: any[] = [];
        // 2. 调接口
        const res = await updateDataTask({
          page: page.currentPage,
          limit: page.pageSize,
          search,
          scene: activeKey.value,
        });
        const res1 = await navList({});
        tabsList.value = res1.map((it: any) => ({
          title: it.sceneName,
          value: it.scene,
        }));
        return { items: res, total: res.length };
      },
    },
    sort: true,
  },
  toolbarConfig: {
    search: true,
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });

const activeKey = ref('PurchaseBomDetail');
const tabsList: any = ref([]);

function resetQuery() {
  gridApi.query();
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-actions>
        <div style="margin-top: 10px; width: 500px">
          <CountTabs
            v-model:active-key="activeKey"
            :list="tabsList"
            @click-tab="resetQuery()"
            :disabled="false"
          />
        </div>
      </template>

      <template #stateName="{ row }">
        <Tag v-if="row.stateName === '已撤销'" color="orange">
          {{ row.stateName }}
        </Tag>
        <Tag v-else-if="row.stateName === '审批中'" color="blue">
          {{ row.stateName }}
        </Tag>
        <Tag v-else-if="row.stateName === '已拒绝'" color="red">
          {{ row.stateName }}
        </Tag>
        <Tag v-else-if="row.stateName === '已通过'" color="green">
          {{ row.stateName }}
        </Tag>
      </template>
      <template #material_name="{ row }">
        <div
          class="flex h-screen flex-col items-center justify-center text-center"
        >
          <div>物料名称：{{ row.modify_object.material_name }}</div>
          <div>物料编号：{{ row.modify_object.sku_sn }}</div>
          <div>物料采购单号：{{ row.modify_object.caigou_id }}</div>
        </div>
      </template>
      <template #update_data="{ row }">
        <div class="">
          <template v-for="item in row.update_data" :key="item.fieldName">
            <div class="flex items-center justify-center space-x-4">
              <div>修改项目: {{ item.fieldName }}</div>
              <div>改前: {{ item.oldValue }}</div>
              <div>改后: {{ item.newValue }}</div>
            </div>
          </template>
        </div>
      </template>
    </Grid>
  </Page>
</template>
